<template>
  <div class="active-content" v-loading="fullscreenLoading" element-loading-text="加载中">
    <el-row>
      <el-col :span="24">
          <div class="title">基本信息</div>
      </el-col>
      <el-col :span="24">
<!--        <el-col :span="8" style="visibility: hidden"><div>1</div></el-col>-->
        <el-col :span="24">
          <div class="user-form">
            <div class="form-item" style="display: flex;align-items: center;padding: 10px 0">
              <div class="form-item-title">头像</div>
              <div class="user-img form-item-content" title="点击头像上传">
                <el-upload
                  class="upload-demo"
                  name="upload_file"
                  ref="upload_img"
                  :action="uploadUrl"
                  :show-file-list="false"
                  accept=".jpg,.jpeg,.png,"
                  :on-success="headUpload"
                  :on-error="upload_error"
                  :on-progress="headUploads"
                  :limit="1">
                  <img :src="sysUserImg" class="userImg">
                </el-upload>
<!--                <div class="img-desc"></div>-->
              </div>
            </div>
            <div class="form-item">
              <div class="form-item-title">账号</div>
              <div class="form-item-content">{{user.account}}</div>
            </div>
            <div class="form-item">
              <div class="form-item-title">账号类别</div>
              <div class="form-item-content">{{user.userTypeName}}</div>
            </div>
            <div class="form-item">
              <div class="form-item-title">手机号</div>
              <div class="form-item-content">{{user.phone}}</div>
              <a class="form-item-link" href="#" @click="updateInfo">修改</a>
            </div>
            <div class="form-item">
              <div class="form-item-title">邮箱</div>
              <div class="form-item-content">{{mail}}</div>
              <a class="form-item-link" href="#" @click="updateMail">修改</a>
            </div>
            <div class="form-item">
              <div class="form-item-title">性别</div>
              <div class="form-item-content">
                <el-radio v-model="user.sex" label="1">男</el-radio>
                <el-radio v-model="user.sex" label="2">女</el-radio>
              </div>
            </div>
            <div class="form-item">
              <div class="form-item-title">昵称</div>
              <div class="form-item-content">
                <el-input v-model="user.name" placeholder="请输入姓名"></el-input>
              </div>
            </div>
            <div class="form-item">
              <div class="form-item-title"></div>
              <div class="form-item-content submitBtn">
                <el-button type="primary" @click="onSubmit">保存</el-button>
              </div>
            </div>
          </div>

        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import userImg from "../../assets/img/head.jpg";
  import {baseUrl} from 'config/index.js'
  import * as commonApi from "api/common";

  export default {
    name: "dataInfo",
    components:{},
    data(){
      return {
        fullscreenLoading: false,
        uploadUrl: baseUrl + '/webs/upload/imgUpload',
        sysUserImg: null,
        imgUrl: "",
        user: {
          account: '',
          userTypeName: '',
          phone: '',
          sex: '',
          name: ''
        },
        mail: '暂无',
      }
    },
    created() {
      this.findUserInfo(1)
    },
    mounted() {
    },
    destroyed() {
      this.findUserInfo(2)
    },
    methods: {
      findUserInfo(type){ //查询用户信息
        if (type === 1){ //初始化用户信息
          var user = sessionStorage.getItem("user");
          user = JSON.parse(user);
          commonApi.findUser(user.userId).then(res => {
            let {data} = res
            if (data.status === 200){
              user = data.data.user;
              var mailbox = data.data.mailbox;
              sessionStorage.setItem("user", JSON.stringify(user)); // session存储用户信息
              if (user.headImageUrl != null && user.headImageUrl != ""){
                if (this.judeImg(user.headImageUrl)) {
                  this.sysUserImg = baseUrl + user.headImageUrl
                } else {
                  this.sysUserImg = user.headImageUrl
                }
                this.imgUrl = user.headImageUrl
              } else {
                this.sysUserImg = userImg
              }
              this.user.account = user.account || "";
              this.user.phone = user.phone || "";
              this.user.sex = user.sex || "";
              this.user.name = user.name || "";
              this.user.userTypeName = user.userTypeName || "";
              if (mailbox && mailbox != "undefined") {
                sessionStorage.setItem("mailbox", JSON.stringify(mailbox)); // session存储邮箱信息
                this.mail = mailbox.email || "";
              }
            }
          })
        } else { //离开更新用户信息
          var user = sessionStorage.getItem("user");
          user = JSON.parse(user);
          commonApi.findUser(user.userId).then(res => {
            let {data} = res
            if (data.status === 200){
              sessionStorage.setItem("user", JSON.stringify(data.data.user)); // session存储用户信息
              sessionStorage.setItem("mailbox", JSON.stringify(data.data.mailbox)); // session存储邮箱信息
            }
          })
        }

      },
      onSubmit(){ //保存
        let user = JSON.parse(sessionStorage.getItem("user"))
        let userId = user.userId
        const params = {
          userId: userId,
          sex: this.user.sex,
          name: this.user.name,
          headImageUrl: this.imgUrl,
        }
        commonApi.updateUser(params).then(res => {
          let {data} = res
          if (data.status === 200){
            if (data.data.result) {
              this.$emit('reloadUser'); // 刷新父组件胡头像信息
              this.$msg({text: data.data.msg, type: 'success'})
            } else {
              this.$msg({text: data.data.msg, type: 'error'})
            }
          } else {
            this.$msg({text: data.msg, type: 'error'})
          }
        })
      },
      updateInfo(){
        this.$emit('jumpPage','third');
      },
      updateMail(){
        this.$emit('jumpPage','four');
      },
      headUpload(response, file, fileList){ //头像上传成功
        this.fullscreenLoading = false
        this.$refs.upload_img.clearFiles();
        if (response.status === 200){
          if (response.data.result){
            console.log(response.data)
            this.sysUserImg = baseUrl + response.data.url
            this.imgUrl = response.data.url
            this.$msg({text: "上传成功！！！", type: 'success'})
          } else {
            this.$msg({text: response.data.msg, type: 'error'})
          }
        } else {
          this.$msg({text: '文件上传失败', type: 'error'})
        }
      },
      headUploads(){ //头像上传中
        this.fullscreenLoading = true
      },
      upload_error(err, file, fileList){ //头像上传失败
        this.$refs.upload_img.clearFiles();
        this.fullscreenLoading = false
        console.log(err)
        this.$msg({text: '上传失败', type: 'error'})
      },
      judeImg(img){
        if (img.indexOf("http") != -1){ //自身的图片
          return false
        } else {
          return true
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  @import "../../assets/css/them";
  @media screen and (max-width: 1600px){
    .active-content{
      .title{
        width: 120px;
        text-align: right;
        font-size: 14px;
        font-weight: 600;
        color: $baseFontColor;
        padding: 0 30px 0 0;
      }
      .user-form{
        color: $baseFontColor;
        font-size: 12px;
        .form-item{
          padding: 12px 0;
          .form-item-title{
            width: 120px;
            display: inline-block;
            /*padding: 0 20px;*/
            padding-right: 30px;
            text-align: right;
            color: #999999;
            font-size: 12px;
            font-weight: 500;
          }
          .form-item-content{
            padding: 0 40px;
            display: inline-block;
            text-align: left;
            font-weight:normal;
          }
          .form-item-link{
            text-decoration: none;
            color: #3B83FC;
            font-weight: 500;
          }
        }
      }
      .user-img{
        .userImg{
          width: 60px;
          border-radius: 50%;
        }
        .img-desc{
          padding-top: 20px;
          color: #666666;
          font-weight: 500;
          font-size: 14px;
        }
      }
      .submitBtn{
        text-align: center;
        button{
          width: 200px;
          margin: 10px 0;
        }
      }
    }
  }
  @media screen and (min-width: 1600px){
    .active-content{
      .title{
        width: 120px;
        text-align: right;
        font-size: 14px;
        font-weight: 600;
        color: $baseFontColor;
        padding: 0 30px 0 0;
      }
      .user-form{
        color: $baseFontColor;
        font-size: 14px;
        .form-item{
          padding: 18px 0;
          .form-item-title{
            width: 120px;
            display: inline-block;
            /*padding: 0 20px;*/
            padding-right: 30px;
            text-align: right;
            color: #999999;
            font-size: 14px;
            font-weight: 500;
          }
          .form-item-content{
            padding: 0 40px;
            display: inline-block;
            text-align: left;
            font-weight:normal;
          }
          .form-item-link{
            text-decoration: none;
            color: #3B83FC;
            font-weight: 500;
          }
        }
      }
      .user-img{
        .userImg{
          width: 80px;
          border-radius: 50%;
        }
        .img-desc{
          padding-top: 20px;
          color: #666666;
          font-weight: 500;
          font-size: 14px;
        }
      }
      .submitBtn{
        text-align: center;
        button{
          width: 200px;
          margin: 10px 0;
        }
      }
    }
  }


</style>
